<template>
  <el-dialog :visible="visible" @close="closeDialog" :title="title">
    <el-form label-width="100px">
      <el-form-item label="直播类型">
        <el-select v-model="selectedPlatformTypeIndex"
                   filterable remote clearable reserve-keyword
                   :remote-method="searchPlatformTypes"
                   :loading="platformType.loading"
                   placeholder="搜索直播类型"
                   class="tag-selector"
                   @change="parseTags">
          <el-option
                  v-for="(pt,index) in platformType.list"
                  :key="pt.id"
                  :value="index"
                  :label="'['+pt.platform.name+'] ' + pt.type.name">
            <span style="float: left">{{ pt.platform.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ pt.type.name }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="网址">
        <el-input v-model="form.url" @change="parseTags"/>
      </el-form-item>
      <el-form-item label="标签">
        <el-select v-model="form.key" clearable class="tag-selector">
          <el-option
                  v-for="tag in tags.list"
                  :key="tag.key"
                  :label="tag.name"
                  :value="tag.key"/>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submit">提 交</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'tagEditor',
    data() {
      return {
        visible: false,
        step: 0,//分为 0,1,2 三步
        selectedPlatformTypeIndex: '',
        platformType: {loading: false, list: []},
        tags: {loading: true, url: '', list: []},
        form: {name: '', key: '', url: '', platform_type_id: ''},
      };
    },
    methods: {
      async searchPlatformTypes(query) {
        this.tags.loading = true;
        const res = await this.$http.get('/api/tags/search-type?search=' + query);
        this.tags.loading = false;
        this.platformType.list = res.data;
      },
      async parseTags() {
        if (!(this.selectedPlatformTypeIndex >= 0))
          return;

        const res = await this.$http.post('/api/tags/parse-tag',
            {url: this.form.url, platform: this.platformType.list[this.selectedPlatformTypeIndex].platform});
        if (res instanceof Error)
          return this.$message({message: res.message, type: 'error'});

        this.tags.list = res.data;
      },
      async submit() {
        this.form.name = this.tags.list[this.form.key].name;
        this.form.platform_type_id = this.platformType.list[this.selectedPlatformTypeIndex].id;

        const res = await this.$http.post('/api/tags/', this.form);
        if (res instanceof Error)
          return this.$alert(res.message, {type: 'error'});
        this.$emit('change');
        this.closeDialog();
      },
      showDialog(data) {
        if (data)
          this.form = data;
        this.visible = true;
      },
      closeDialog() {
        this.visible = false;
        Object.assign(this.$data, this.$options.data());
      },
    },
    computed: {
      title() {
        return this.form.id ? '编辑标签' : '创建标签';
      },
    },
  };
</script>

<style lang="scss">
  .tag-selector {
    min-width: 50% !important;
  }
</style>